<template>
  <div id="index">
      <div class="titleLeft" @click="navBackTo">
        <!-- 默认隐藏 -->
        <img v-show="!show" src="../../assets/arrow.png"/>
        <!-- 在没有点击收索图标时，显示 -->
        <img v-show="show" src="../../assets/left.png"/>
      </div>
      <div class="titleMid">
        <!-- 默认隐藏 -->
        <div class="inputContent" v-show="!show">
          <input>
        </div>
        <!-- 在没有点击收索图标时，显示,注意这个route-->
        <ul v-show="show">
            <li :class="[$route.path.includes('/mainPage/mine')?'active':'']" @click=" swithTo('/mine')">我的</li>
            <li :class="[$route.path.includes('/mainPage/find')?'active':'']" @click=" swithTo('/find')">发现</li>
            <li :class="[$route.path.includes('/mainPage/cloud')?'active':'']" @click=" swithTo('/cloud')">云村</li>
            <li :class="[$route.path.includes('/mainPage/movie')?'active':'']" @click=" swithTo('/movie')">视频</li>
        </ul>
      </div>
      <div class="titleRight" @click="search">
        <!-- 在没有点击收索图标时，显示 -->
        <img v-show="show" src="../../assets/right.png"/>
      </div>
  </div>
</template>
<script>
export default {
    name:'musicTitle',
    data:function(){
        return {
            show:true,//控制显示与否
            isActive:false//动态绑定样式
        }
    },
    methods:{
      swithTo(Topath){
        this.isActive=true;
        switch (Topath) {
          case '/mine':
            this.$router.replace('/mainPage/mine');
            break;
          case '/find':
            this.$router.replace('/mainPage/find');
            break;
          case '/cloud':
            this.$router.replace('/mainPage/cloud');
            break;
          case '/movie':
            this.$router.replace('/mainPage/movie');
            break;
          case '/search':
            this.$router.replace('/mainPage/search');
            break;
        }
      },
      navBackTo(){//点击搜索图标后不想搜索，返回上一级路由
        this.show=true;
        this.$router.replace('/mainPage/find');
      },
      search(){//点击搜索图标后跳转到搜索页面
        this.show=false;
        this.$router.replace('/mainPage/search')
      }
    }
}
</script>

<style lang="stylus" scoped>
  #index
    position fixed
    left 0
    top 0
    width 100%
    z-index 10000
    height 50px
    background-color #e6463a
    display flex
    flex-direction row
    justify-content space-around
    align-items center
  .titleMid
      ul
        display table
        text-align center
        li
          display table-cell
          color white
          padding 10px    
  .titleLeft img 
      margin-left 5px 
      margin-right 5px
      width 22px
      height 22px
  .titleRight img 
      margin-left 5px 
      margin-right 5px
      width 22px
      height 22px
  .inputContent
      border-bottom 1px solid #D7D7D7
      input
        height 30px
        width 220px
        color #D7D7D7 
        outline: none;
        -webkit-appearance: none;
        border-radius: 0;
        background-color #e6463a
  .active
      font-weight 600
      font-size 17px

</style>
  